<script setup lang="ts">
import { SunIcon, MoonIcon } from '@/components/Icons'
import { ref } from 'vue'

const darkMode = ref(false)
const mainContainer = ref<HTMLDivElement | null>(null)
const clipContainer = ref<HTMLDivElement | null>(null)
const toggleBtn = ref<HTMLButtonElement | null>(null)
const animTime = 1000

function expand() {
  //复制
  // type guard narrowing
  if (mainContainer.value && clipContainer.value) {
    clipContainer.value.innerHTML = mainContainer.value.outerHTML
    // 选择class的时候需要加.
    const tmpContainer = clipContainer.value.querySelector('.content-container')!
    tmpContainer.classList.toggle('my-drark')
    // 添加动画效果
    clipContainer.value.classList.add('expand')

    setTimeout(() => {
      // type guard narrowing
      if (mainContainer.value && clipContainer.value) {
        // 这行代码会使得click event事件失效，因为vue处理的是vnode,原生的html
        // 是不能识别@click，所以事件绑定失效了
        //mainContainer.value.outerHTML = clipContainer.value.innerHTML
        mainContainer.value.classList.toggle('my-drark')
        clipContainer.value.classList.remove('expand')
        clipContainer.value.innerHTML = ''
        darkMode.value = !darkMode.value
      }
    }, animTime)
  }
}

function shrink() {
  //复制
  // type guard narrowing
  if (mainContainer.value && clipContainer.value) {
    clipContainer.value.innerHTML = mainContainer.value.outerHTML
    mainContainer.value.classList.toggle('my-drark')
    // 添加动画效果
    clipContainer.value.classList.add('shrink')

    setTimeout(() => {
      // type guard narrowing
      if (mainContainer.value && clipContainer.value) {
        clipContainer.value.innerHTML = ''
        clipContainer.value.classList.remove('shrink')
      }
      darkMode.value = !darkMode.value
    }, animTime)
  }
}

function toggleDarkMode() {
  darkMode.value ? shrink() : expand()
}
</script>

<template>
  <div :class="['dark-and-light-mode__container', $attrs.class]">
    <div ref="mainContainer" class="content-container">
      <div class="circle"></div>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi, esse.</p>
      <button ref="toggleBtn" @click="toggleDarkMode" class="toggle-btn">
        <SunIcon v-show="!darkMode" />
        <MoonIcon v-show="darkMode" />
      </button>
    </div>
    <!-- 裁剪的容器 -->
    <div ref="clipContainer" class="clip"></div>
  </div>
</template>

<style lang="scss" scoped>
.dark-and-light-mode__container {
  border: 1px solid black;
  height: 100%;
  position: relative;
  background-color: red;
  color: black;

  .content-container {
    background-color: antiquewhite;
    height: 100%;
  }

  .toggle-btn {
    box-sizing: border-box;
    position: absolute;
    /* 为了和clip-path对齐 */
    left: 5%;
    top: 90%;
    transform: translate(-50%, -50%);
  }
}

.circle {
  width: 150px;
  height: 100px;
  background-color: lightblue;
  border-radius: 100%; /* 变成圆形 */
}

$anim-time: 1s;

.clip {
  position: absolute;
  z-index: 2;
  width: 0;
  height: 0;
  bottom: 0;
  &.expand {
    width: 100%;
    height: 100%;
    animation: open $anim-time ease-in forwards;

    @keyframes open {
      0% {
        width: 100%;
        height: 100%;
        clip-path: circle(0% at 3.5% 90%);
      }
      100% {
        clip-path: circle(100%);
      }
    }
  }

  &.shrink {
    width: 100%;
    height: 100%;
    animation: close $anim-time ease-in forwards;

    @keyframes close {
      0% {
        width: 100%;
        height: 100%;
        clip-path: circle(100%);
      }
      100% {
        clip-path: circle(100%);
        clip-path: circle(0% at 3.5% 90%);
      }
    }
  }
}

.content-container {
  background-color: rgb(246, 238, 228);

  &.my-drark {
    background-color: rgb(12, 111, 139);
    color: white;
  }
}
</style>
